<template>
  <div class="internship-container">
    <el-card shadow="never">
      <!-- Search bar -->
      <div class="filter-header">
        <el-input 
          v-model="filter.id" 
          placeholder="编号"
          style="width: 100px"
          class="filter-item"
        />
        <el-input 
          v-model="filter.studentId" 
          placeholder="学生学号"
          style="width: 120px; margin-left: 10px"
          class="filter-item"
        />
        <el-input 
          v-model="filter.studentName" 
          placeholder="学生姓名"
          style="width: 120px; margin-left: 10px"
          class="filter-item"
        />
        <el-button type="primary" style="margin-left: 15px" @click="handleSearch">搜索</el-button>
        <el-button style="margin-left: 10px" @click="handleReset">重置</el-button>
      </div>
  
      <!-- Data table -->
      <el-table 
        :data="filteredData"
        style="width: 100%"
        header-row-class-name="table-header"
      >
        <el-table-column prop="id" label="编号" width="80" align="center"/>
        <el-table-column prop="name" label="名称" width="120"/>
        <el-table-column prop="requirement" label="申请要求" width="120"/>
        <el-table-column prop="company" label="实习单位" width="150"/>
        <el-table-column prop="studentId" label="学生学号" width="120" align="center"/>
        <el-table-column prop="studentName" label="学生姓名" width="120"/>
        <el-table-column prop="status" label="审核状态" width="120" align="center">
          <template #default="scope">
            <el-tag type="success" size="small">{{ scope.row.status  }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" align="center">
          <template #default="scope">
            <el-button type="text" style="color: #67C23A" @click="showDetail(scope.row)"> 
              <span style="font-size: 14px">✔</span> 详细 
            </el-button>
            <el-button 
              type="text" 
              style="color: #409EFF; margin: 0 5px" 
              @click="handleApprove(scope.row)" 
            >
              <span style="font-size: 14px">✔</span> 同意 
            </el-button>
            <el-button 
              type="text" 
              style="color: #F56C6C" 
              @click="handleReject(scope.row)" 
            >
              <span style="font-size: 14px">✘</span> 拒绝 
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- Pagination info -->
      <div class="pagination-info">
        第 1 页，共 {{ filteredData.length  }} 条记录。 
      </div>
    </el-card>
  
    <!-- Detail dialog -->
    <el-dialog 
      v-model="dialogVisible"
      title="申请详情"
      width="30%"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="编号">{{ selectedRow.id  }}</el-descriptions-item>
        <el-descriptions-item label="名称">{{ selectedRow.name  }}</el-descriptions-item>
        <el-descriptions-item label="申请要求">{{ selectedRow.requirement  }}</el-descriptions-item>
        <el-descriptions-item label="实习单位">{{ selectedRow.company  }}</el-descriptions-item>
        <el-descriptions-item label="学生学号">{{ selectedRow.studentId  }}</el-descriptions-item>
        <el-descriptions-item label="学生姓名">{{ selectedRow.studentName  }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="selectedRow.status  === '通过' ? 'success' : 'danger'" size="small">{{ selectedRow.status  }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>
 
<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
 
// State management 
const filter = reactive({
  id: '',
  studentId: '',
  studentName: ''
})
 
const originalTableData = ref([
  { id: 11, name: '顶岗实习', requirement: '123', company: '1', studentId: '1', studentName: '冯停', status: '通过' },
  { id: 12, name: '顶岗实习', requirement: '7', company: '1', studentId: '1', studentName: '冯停', status: '通过' },
  { id: 13, name: '顶岗实习', requirement: '无挂科', company: '360', studentId: '48', studentName: '王旭', status: '通过' },
  { id: 14, name: '顶岗实习', requirement: '无挂科', company: '1', studentId: '48', studentName: '王旭', status: '通过' },
  { id: 15, name: '顶岗实习', requirement: '无挂科', company: '北京某公司', studentId: '48', studentName: '王旭', status: '通过' }
])
 
const dialogVisible = ref(false)
const selectedRow = ref({})
 
// Computed properties 
const filteredData = computed(() => {
  return originalTableData.value.filter(item  => {
    return (!filter.id  || item.id  == filter.id)  &&
           (!filter.studentId  || item.studentId.includes(filter.studentId))  &&
           (!filter.studentName  || item.studentName.includes(filter.studentName)) 
  })
})
 
// Methods 
const handleSearch = () => {
  // Filtering is handled by computed property 
}
 
const handleReset = () => {
  filter.id  = ''
  filter.studentId  = ''
  filter.studentName  = ''
}
 
const showDetail = (row) => {
  selectedRow.value  = { ...row }
  dialogVisible.value  = true 
}
 
const handleApprove = async (row) => {
  try {
    await ElMessageBox.confirm(' 确定要同意该申请吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    row.status  = '通过'
    ElMessage.success(' 已同意申请')
  } catch {
    // User cancelled 
  }
}
 
const handleReject = async (row) => {
  try {
    await ElMessageBox.confirm(' 确定要拒绝该申请吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    row.status  = '拒绝'
    ElMessage.success(' 已拒绝申请')
  } catch {
    // User cancelled 
  }
}
</script>
 
<style scoped>
.internship-container {
  padding: 20px;
}
 
.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
 
.filter-item {
  margin-left: 10px;
}
 
.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
}
 
.pagination-info {
  margin-top: 15px;
  color: #909399;
  font-size: 13px;
  text-align: center;
}
 
.el-table .cell {
  white-space: nowrap;
}
</style>